<script setup>
import { h, ref } from 'vue'
const dropdownRef = ref(null)
const options = [
  { key: 1, label: 'item1' },
  { key: 2, label: 'item2', divide: true },
  { key: 3, label: 'item3', disabled: true },
  { key: 4, label: 'item4' },
]
const options1 = [
  { key: 1, label: h('div', { class: 'bar', innerHTML: 'hello' }) },
  { key: 2, label: 'item2', divide: true },
  { key: 3, label: 'item3', disabled: true },
  { key: 4, label: 'item4' },
]
const handleSelect = item => {
  console.log(item)
}
const handleChange = () => {
  console.log('改变状态')
}

const handleOpen = () => {
  dropdownRef.value?.show()
}
const handleClose = () => {
  dropdownRef.value?.hide()
}
</script>

<template>
  <div>
    <h1 class="row-title">基础用法</h1>
    <div class="row">
      <lee-dropDown
        hideAfterClick
        placement="left"
        :menu-options="options"
        @select="handleSelect"
        @change="handleChange"
      >
        <lee-button type="primary">下拉框</lee-button>
      </lee-dropDown>
    </div>
    <h1 class="row-title">点击触发</h1>
    <div class="row">
      <lee-dropDown
        hideAfterClick
        placement="left"
        trigger="click"
        :menu-options="options"
        @select="handleSelect"
        @change="handleChange"
      >
        <lee-button type="primary">下拉框</lee-button>
      </lee-dropDown>
    </div>
    <h1 class="row-title">手动触发</h1>
    <div class="row">
      <lee-dropDown
        ref="dropdownRef"
        placement="left"
        trigger="click"
        manual
        :menu-options="options"
        @select="handleSelect"
        @change="handleChange"
      >
        <lee-button type="primary">下拉框</lee-button>
      </lee-dropDown>
    </div>
    <div class="row">
      <lee-button type="primary" @click="handleOpen">手动打开</lee-button>
      <lee-button type="danger" @click="handleClose">手动关闭</lee-button>
    </div>
    <h1 class="row-title">自定义节点</h1>
    <div class="row">
      <lee-dropDown
        placement="left"
        trigger="click"
        :menu-options="options1"
        @select="handleSelect"
        @change="handleChange"
      >
        <lee-button type="primary">自定义Node节点</lee-button>
      </lee-dropDown>
    </div>
  </div>
</template>
